<template>
  <div class="pic">
    <div class="pic_box">
      <div class="pic_top">
        <div class="pic_top_left">
          <h4>订单统计</h4>
        </div>
        <div class="pic_top_right">
          <ul class="pic_top_right_1">
            <li
              v-for="(item, index) in dataTab"
              :key="index"
              :style="{
                color:
                  changeNum.timeNum1 === index ? 'rgba(85, 202, 125, 100)' : '',
              }"
              @click="timeChange1(index)"
            >
              {{ item }}
            </li>
          </ul>
          <!-- <ul class="pic_top_right_2">
                  <li>折</li>
                  <li>柱</li>
                  <li>饼</li>
                </ul> -->
        </div>
      </div>
      <div class="pic_cont" id="pic_cont1"></div>
    </div>
    <div class="pic_box">
      <div class="pic_top">
        <div class="pic_top_left">
          <h4>订单统计</h4>
        </div>
        <div class="pic_top_right">
          <ul class="pic_top_right_1">
            <li
              v-for="(item, index) in dataTab"
              :key="index"
              :style="{
                color:
                  changeNum.timeNum2 === index ? 'rgba(85, 202, 125, 100)' : '',
              }"
              @click="timeChange2(index)"
            >
              {{ item }}
            </li>
          </ul>
          <!-- <ul class="pic_top_right_2">
                  <li>折</li>
                  <li>柱</li>
                  <li>饼</li>
                </ul> -->
        </div>
      </div>
      <div class="pic_cont" id="pic_cont2"></div>
    </div>
  </div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/grid");
require("echarts/lib/chart/line");
export default {
  mounted() {
    this.myEcharts1();
    this.myEcharts2();
  },
  data() {
    return {
      dataTab: ["七天", "一月", "一年"],
      changeNum: {
        timeNum1: 0,
        timeNum2: 0,
        picNum1: 0,
        picNum2: 0,
      },
    };
  },

  methods: {
    timeChange1(index) {
      this.changeNum.timeNum1 = index;
    },
    timeChange2(index) {
      this.changeNum.timeNum2 = index;
    },
    myEcharts1() {
      // 基于准备好的dom，初始化echarts实例
      var chartDom = document.getElementById("pic_cont1");
      var myChart = echarts.init(chartDom);
      var option;

      // 指定图表的配置项和数据
      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    myEcharts2() {
      // 基于准备好的dom，初始化echarts实例
      var chartDom = document.getElementById("pic_cont2");
      var myChart = echarts.init(chartDom);
      var option;

      // 指定图表的配置项和数据
      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.pic {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  .pic_box {
    width: 48%;

    .pic_top {
      display: flex;
      justify-content: space-between;

      .pic_top_left {
        height: 24px;
        line-height: 24px;
        color: rgba(16, 16, 16, 100);
        font-size: 16px;
        text-align: left;
        font-family: SourceHanSansSC-bold;
      }

      .pic_top_right {
        .pic_top_right_1 {
          display: flex;
          height: 20px;
          line-height: 20px;
          color: rgba(16, 16, 16, 100);
          font-size: 13px;
          text-align: right;
          font-family: SourceHanSansSC-regular;

          li {
            margin-left: 6px;
            cursor: pointer;
          }
        }

        .pic_top_right_2 {
          margin-top: 6px;
          display: flex;
          text-align: center;

          li {
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: rgba(142, 142, 142, 100);
            margin-left: 6px;
            cursor: pointer;
          }
        }
      }
    }

    .pic_cont {
      height: 300px;
      margin-top: 6px;
      background: lavender;
    }
  }
}
</style>